<script setup>
import { reactive, toRefs } from 'vue';

const props = defineProps(['data'])
const emit = defineEmits(['change'])
const { data = [] } = toRefs(props)
const selections = reactive([])
function change(index, value) {
  selections[index] = value
  emit('change', selections)
}
</script>

<template>
  <div class="filter">
    <van-row class="filter-row" v-for="(item, index) in data" :key="item.title" :wrap="false" >
      <van-col :span="3">{{ item.title }}</van-col>
      <van-row>
        <van-col class="filter-gutter" :class="{ active: selections[index] === opt }" v-for="opt in item.options" :key="opt" @click="change(index, opt)">{{ opt }}</van-col>
      </van-row>
    </van-row>
  </div>
</template>

<style scoped>
.filter {
  padding: 10px;
  background: #fff;
}
.filter-row {
  margin-bottom: 5px;
}
.filter-gutter {
  margin-right: 10px;
}
.filter-gutter.active {
  color: var(--van-primary-color);
}
</style>
